<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XML Manager</title>
<meta th:include="/admin/head :: header"></meta>
</head>

<style>
body {
	background: #ededed;
}
</style>

<body>
	<div class="header">
		<h1 class="page-header">
			XML管理 <small></small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="/admin/word/word-list">主页</a></li>
			<li><a href="/admin/word/word-list">XML管理</a></li>
			<li class="active">数据</li>
		</ol>
	</div>
	<div id="page-inner">
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-heading">XML</div>
					<div class="panel-body">
						<form class="form-horizontal" role="form" method="post" enctype="multipart/form-data"
								action="/admin/xml/import">
								
							<div class="form-group">
								<label for="update" class="col-sm-2 control-label">更新数据:</label>
								<div class="col-sm-2">
									<button class="btn btn-success" type="button" onclick = "update();">更新</button>
								</div>
							</div>
							<div class="form-group">
								<label for="language" class="col-sm-2 control-label">选择语言:</label>
								<div class="col-sm-6">
									<select class="form-control" name="countryCode" id="countryCode">
										<option th:each="country:${countryMap}" th:value="${country.key}" th:text="${country.value}"></option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="export" class="col-sm-2 control-label">导出XML：</label>
								<div class="col-sm-6">
									<button class="btn btn-success"  type="button" onclick="exportXML();">导出</button>
								</div>
							</div>
							<div class="form-group">
								<label for="export" class="col-sm-2 control-label">导入XML：</label>
								<div class="col-sm-4">
									<input name = "file" id="file" type="file" class="form-control"/>
								</div>
								<div class="col-sm-2">
									<button class="btn btn-success"  type="submit">导入</button>
								</div>
							</div>

						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	
<!-- 模态框（Modal） -->
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="top:50%; left:50%; margin:0px">
      	<div>
      		<img style="width:50px; height:50px" alt="加载中......" src="/images/ajax-loader.gif"/>
      	</div>
    </div><!-- /.modal -->
</div>
	

<script>
	
	function update(){
		$.ajax({
			url:"/admin/xml/update",
			beforeSend:function(){
				$('#loadingModal').modal({backdrop: 'static', keyboard: false});	
			},
 			complete:function(){
				$('#loadingModal').modal('hide');
			} 
			
		});
		
	}
	
	
	function exportXML(){
		var countryCode  = $('#countryCode option:selected').val();
		console.log("countryCode:"+countryCode);
		$.ajax({
			url:"/admin/xml/export",
			async:false,
			dataType:"text",
			data:{"countryCode":countryCode},
			success:function(data){
				console.log(data);
				callBack(data);
			}
		});
	}
	
	
	function callBack(data){
		var blob = new Blob([data],{type:"application/xml;charset=utf-8"});
		saveAs(blob, "data.xml");
       
	}
</script>

</body>
</html>